<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            left: 0;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <!-- 引入动画js文件 -->
    <script src="js/animate.js"></script>
</head>

<body>
    <button id="btn1">移动到600</button>
    <button id="btn2">移动到0</button>
    <div class="box"></div>

    <script>
        // 需求：点击按钮移动到600，让盒子移动到600到位置：每次移动目标值的10%

        let box = document.querySelector('.box');


        // 事件：移动到0
        let timeId;
        document.getElementById('btn2').onclick = function () {
            // 调用函数
            animate();
        };

        // 事件
        document.getElementById('btn1').onclick = function () {
            // 调用动画函数
            animate();
        }

        /*  // 创建一个函数
         function animate() {
             // 清理可能存在的定时器
             clearInterval(timeId);

             // 定时器
             timeId = setInterval(function () {
                 // 拿到box盒子原来的位置
                 // let current = box.offsetLeft;
                 let current = getComputedStyle(box)['left'];
                 // console.log(current);

                 // 变成数字
                 current = parseFloat(current);
                 // console.log(current);

                 // 计算下一个位置：当前要走多远
                 // （目标 - 当前位置） * 0.1
                 let step = (600 - current) * 0.1
                 // console.log(step);

                 // 让step变成整数：向上取整（当前是向右移动）
                 step = Math.ceil(step);

                 // 移动元素：修改元素的行内样式
                 box.style.left = current + step + 'px';

                 console.log(step, current);

                 // 结束定时器：current == 600 || step == 0
                 if (step == 0) {
                     clearInterval(timeId);
                 }
             }, 20);
         } */
    </script>
</body>

</html>